<template>
    <div>
        <!--查询条件start --111s-->
        <el-card>
        <el-form :inline="true"
                 :model="query"
                 class="query-form"
                 size="small">
            <el-form-item class="query-form-item">
                <el-input v-model="query.content"
                          placeholder="请输入商品名称"
                          prefix-icon="el-icon-search"
                          @keyup.enter.native="onSubmit"
                          clearable></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary"
                           icon="el-icon-refresh"
                           @click="onRest"></el-button>
                <el-button type="primary"
                           icon="el-icon-search"
                           @click="onSubmit">查询</el-button>
            </el-form-item>

        </el-form>
        <!--查询条件end-->
        <!--列表start --->
        <el-table ref="multipleTable"
                  v-loading="loading"
                  :data="list"
                  :header-cell-style="{background:'#F4F4F5',color:'#606266'}"
                  @selection-change="handleSelectionChange"
                  border>
            <el-table-column label="序号" prop="commodityname" width="50" align="center" fixed>
                <template slot-scope="scope">
                    <span>{{scope.$index + 1}}</span>
                </template>
            </el-table-column>
            <el-table-column label="商品名称" prop="commodityname" width="150" align="center"/>
            <el-table-column label="轮播图"
                             prop="commodityicon"
                             align="center"
                             width="180">
                <template slot-scope="scope">
                    <el-popover v-if="scope.row.commodityicon"
                                placement="right"
                                trigger="hover">
                        <img :src="scope.row.commodityicon"
                             style="width:400px;border-radius:3px;">
                        <img slot="reference"
                             :src="scope.row.commodityicon"
                             style="max-height: 80px;max-width: 50px;border-radius:5px;">
                    </el-popover>
                    <span v-else>-</span>
                </template>
            </el-table-column>
            <el-table-column label="一级分类" prop="topcategoryname" width="150" align="center"/>
            <el-table-column label="二级分类" prop="secondarycategoryname" width="150" align="center"/>
            <el-table-column label="三级分类" prop="thirdcategoryname" width="150" align="center"/>
            <el-table-column label="审核状态" with="100" align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.certificationstatus == 0">审核中</span>
                    <span v-if="scope.row.certificationstatus == 1">审核通过</span>
                    <span v-if="scope.row.certificationstatus == 2">审核拒绝</span>
                    <div v-if="scope.row.certificationstatus == 2">
                        <el-button type="text" @click="openAlert(scope.row)">查看</el-button>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="库存" prop="commoditynum" width="150" align="center"/>
            <el-table-column label="申请时间"
                             with="300"
                             :show-overflow-tooltip="true"
                             align="center">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span >{{ scope.row.examineCreatetime | formatDateStr('yyyy-MM-dd hh:mm:ss') }}</span>
                </template>
            </el-table-column>

            <el-table-column label="操作"
                             align="center" width="160" fixed="right">
                <template slot-scope="scope">
                    <el-button type="primary"
                               size="mini"
                               @click.native="detailForm(scope.$index, scope.row)">查看详情
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--列表end --222e-->

        <!--分页模块start-->
        <el-pagination class="pagination-container"
                       background
                       :page-size="query.pageSize"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       layout="total,sizes,prev, pager, next, jumper"
                       :current-page="query.currentPage"
                       :page-sizes="[5,10, 20, 30, 50]"
                       :total="totalNumber"></el-pagination>
        <!--分页模块end-->

        <!--查看弹框-->
        <el-dialog
            title="查看"
            :visible.sync="detailVisible"
            :before-close="hideDetailForm"
            width="50%"
            top="5vh"
            v-dialogDrag
            :close-on-click-modal="false"
        >
        <template slot="title">
            <div class="avue-crud__dialog__header">    
                <span class="el-dialog__title">
                <span style="display:inline-block;background-color: #3478f5;width:3px;height:20px;margin-right:5px; float: left;margin-top:2px"></span>
                查看
                </span>
            </div>
        </template>
        <el-card>
            <el-form :model="formData" label-width="140px">
                <el-form-item label-width="80px" label="基本参数" style="background: #e1e1e1">
                </el-form-item>
                <el-form-item label="商品名称：">
                    <input v-model="formData.commodityname" type="text" readonly>
                </el-form-item>
                <el-form-item label="商品分类：">
                    <span>{{formData.topcategoryname+","+formData.secondarycategoryname+","+formData.thirdcategoryname}}</span>
                </el-form-item>

                <el-form-item style="border-bottom:1px solid #ebeef5;" label-width="0px">

                    <el-form-item label="代理价：" style="width:30%;display: inline-block;">
                        <input v-model="formData.brandCommodityoldprice" type="text" readonly>
                    </el-form-item>
                    <el-form-item label="零售价：" style="margin-left:80px; width:30%;display: inline-block;">
                        <input v-model="formData.brandCommodityprice" type="text" readonly>
                    </el-form-item>

                </el-form-item>

                <!-- <el-form-item style="border-bottom:1px solid #ebeef5;" label-width="0px">

                    <el-form-item label="快递：" style="width:30%;display: inline-block;">
                        <span>{{formData.postagetype=='0'? '包邮':'不包邮'}}</span>
                    </el-form-item>
                    <el-form-item label="发货地：" style="margin-left:80px; width:30%;display: inline-block;">
                        <input v-model="formData.commodityfrom" type="text" readonly>
                    </el-form-item>

                </el-form-item> -->

                <el-form-item style="border-bottom:1px solid #ebeef5;" label-width="0px">
                    <el-form-item label="添加时间：" style="width:30%;display: inline-block;">
                        <input
                            :value="formData.createtime |formatDateStr('yyyy-MM-dd') "
                            type="text"
                            readonly
                        >
                    </el-form-item>
                    <el-form-item label="商品ID：" style="margin-left:80px; width:30%;display: inline-block;">
                        <input v-model="formData.commodityid" type="text" readonly>
                    </el-form-item>

                </el-form-item>
                <el-form-item style="border-bottom:1px solid #ebeef5;" label-width="0px">
                    <el-form-item label="封面图：" style="width:30%;display: inline-block">
                        <!--<img :src="formData.userpic" alt style="width: 60px;height: 50px">-->
                        <el-popover v-if="formData.commodityicon" placement="right" trigger="hover">
                            <img :src="formData.commodityicon" style="width:400px;border-radius:3px;">
                            <img
                                slot="reference"
                                :src="formData.commodityicon"
                                style="max-height: 80px;max-width: 50px;border-radius:5px;"
                            >
                        </el-popover>
                        <span v-else>-</span>

                    </el-form-item>

                    <el-form-item label="库存：" style="margin-left:80px; width:30%;display: inline-block;">
                        <input v-model="formData.commoditynum" type="text" readonly>
                    </el-form-item>
                </el-form-item>
                <el-form-item label-width="80px" label="规格参数" style="background: #e1e1e1">
                </el-form-item>
                <el-table
                    ref="multipleTable"
                    v-loading="loading"
                    :data="parameterlist"
                    :header-cell-style="{background:'#F4F4F5',color:'#606266'}"
                    @selection-change="handleSelectionChange"
                    border
                >
                    <el-table-column label="商品图片" width="250"  align="center">
                        <template slot-scope="scope">
                            <el-popover v-if="scope.row.inventorypic" placement="right" trigger="hover">
                                <img :src="scope.row.inventorypic" style="width:400px;border-radius:3px;">
                                <img
                                    slot="reference"
                                    :src="scope.row.inventorypic"
                                    style="max-height: 80px;max-width: 50px;border-radius:5px;"
                                >
                            </el-popover>
                            <span v-else>-</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="规格参数" align="center">
                        <el-table-column v-for="(item,index) in inputData" :key="index" :label='item.key' width="250" align="center">
                            <template slot-scope="scope">
                                <div v-if="scope.row.splist!==undefined">
                                    <el-select v-model="scope.row.splist[index]" placeholder="请选择" disabled  ref="sel" >
                                        <el-option
                                            v-for="(it,ind) in (item.val.split(','))"
                                            :key="ind"
                                            :label="it"
                                            :value="it">
                                        </el-option>
                                    </el-select>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table-column>
                    <el-table-column label="成本价" prop="costprice"  align="center"/>
                    <el-table-column label="代理价" prop="primaryagentprice"  align="center"/>
                    <el-table-column label="经销价" prop="secondaryagentprice"  align="center"/>
                    <el-table-column label="分销价" prop="commodityprice"  align="center"/>
                    <el-table-column label="零售价" prop="commodityoldprice" align="center"/>
                    <el-table-column label="县域收益占比(%)" prop="profitproportion" width="150" align="center">
                            <template slot-scope="scope">
                                <el-input-number style="width: 120px;" v-model="scope.row.profitproportion" align="center" disabled
                                :min="0" :controls="false" :precision="4" ></el-input-number>

                            </template>
                    </el-table-column>
                    <el-table-column label="库存" prop="inventorynum" align="center"/>
                </el-table>
                <el-form-item label-width="65px" label="轮播图" style="background: #e1e1e1;margin-top:20px">
                </el-form-item>
                <el-form-item >
                    <div v-for="(item,index) in formData.commoditypiclist" :key="index" style="display:inline-block;">
                        <img :src="item" style="width:200px;height:auto;border-radius:3px;margin-left: 5px;">
                    </div>
                </el-form-item>
                
                <el-form-item label-width="80px" label="商品详情" style="background: #e1e1e1"></el-form-item>
                 <span v-html="formData.commoditydesc" style="margin-left:10%;display:block;"></span>

            </el-form>
            </el-card>
        </el-dialog>
        </el-card>
    </div>
</template>
<script>
    import { brandAuditAgentCommodityList,} from "../../api/broadcastCommodity/brandAuditAgentCommodity.js";
    import { BASE_URL } from "../../config/app";

    export default {
        components: {},
        data() {
            return {
                uploadData: [],
                query: {
                    currentPage: 1,
                    content: "",
                    pageSize: 5
                },
                formName: null,
                formMap: {
                    add: "添加",
                    edit: "编辑"
                },
                list: [], //列表集合
                parameterlist: [], //add参数list
                inputData: [], // 循环创建input存值
                totalNumber: 0, //分页总页数
                loading: true, //列表加载
                formData: {}, //新增或修改的对象
                detailVisible: false, // 查看窗口
            };
        },

        methods: {
            /*获取列表事件*/
            brandCommodityList() {
                this.loading = true;
                //   getTopList
                brandAuditAgentCommodityList(this.query)
                    .then(response => {
                        if (response.code != 0) {
                            this.$message.error(response.message);
                            this.loading = false;
                            return false;
                        }
                        console.log(response);
                        this.list = response.data.list || [];
                        this.totalNumber = response.data.totalNumber || 0;
                        setTimeout(() => {
                            this.loading = false;
                        }, 0.3 * 1000);
                    })
                    .catch(() => {
                        this.loading = false;
                        this.list = [];
                    });
            },

            /*列表查询条件事件*/
            onSubmit() {
                this.query.currentPage = 1;
                this.brandCommodityList();
            },

            /*刷新*/
            onRest() {
                //刷新事件需要重置查询条件
                this.query = {
                    currentPage: 1,
                    pageSize: 5
                };
                this.brandCommodityList();
            },
            // 隐藏详情弹框
            hideDetailForm() {
                // 更改值
                this.detailVisible = !this.detailVisible;
                return true;
            },
            handleSelectionChange(){},

            //显示 查看弹框
            detailForm(index, row) {
                this.detailVisible = true;
                if (row !== null) {
                    this.inputData=[]
                    this.formData = Object.assign({}, row);
                    this.formData.brandCommodityoldprice=row.inventorylist[0].primaryagentprice;
                    this.formData.brandCommodityprice=row.inventorylist[0].commodityoldprice;
                    this.formData.secondarycategoryid=row.secondarycategoryid;
                    this.formData.thirdcategoryid=row.thirdcategoryid;
                    let id=row.warehouseid
                    this.formData.warehouseid=id;
                    let  postagetype=row.postagetype+"";
                    this.formData.postagetype=postagetype;
                    if(row.inventorylist!=null&&row.inventorylist[0].inputdata!=null){
                        this.inputData=JSON.parse(row.inventorylist[0].inputdata);
                    }else{
                        let data={
                            key:"",
                            val:""
                        }
                        this.inputData.push(data);
                    }
                }
                let data=[];
                let pic=[];
                let vdata=[];
                let vpic=[];
                for (let i=0;i<row.commoditypiclist.length;i++){
                    let picdata=row.commoditypiclist[i];
                    if(picdata.recoursetype===0){
                        let obj={
                            name:"",
                            url:""
                        }
                        obj.name=i;
                        obj.url=picdata.picurl;
                        data.push(obj);
                        pic.push(picdata.picurl)
                    }
                    if(picdata.recoursetype===1){

                        let obj={
                            name:"",
                            url:""
                        }
                        obj.name=i;
                        obj.url=picdata.picurl;
                        vdata.push(obj);
                        vpic.push(picdata.picurl)
                    }
                }

                this.formData.videopic=vpic;
                this.vuploadData=vdata
                this.commoditypiclist=pic;
                this.formData.commoditypiclist=pic;
                this.uploadData=data;

                this.parameterlist=row.inventorylist;
                for(let i=0;i<this.parameterlist.length;i++){
                    let sav=[];
                    this.$set(this.parameterlist[i], "savparameterlist", sav);
                    this.$set(this.parameterlist[i], "splist", sav);

                    var a=this.parameterlist[i].inventory.indexOf("}");
                    var b=this.parameterlist[i].inventory.substring(1,a)
                    var a1=b.split(",");
                    var splist1=[];
                    for (let c=0;c<a1.length;c++) {
                        var s=a1[c].split(":")[1].substring(1,a1[c].split(":")[1].length-1);
                        splist1.push(s)
                    }
                    //县域百分比回显
                    if( this.parameterlist[i].profitproportion<1){
                        (this.parameterlist[i].profitproportion)*= 100;
                    }else{
                        (this.parameterlist[i].profitproportion)
                    }
                    this.parameterlist[i].splist=(splist1);
                    this.parameterlist[i].savparameterlist=JSON.parse(this.parameterlist[i].secinventory);

                    this.parameterlist[i].companytype= this.parameterlist[i].companytype.toString();
                }
                //参数
                let sav=[];
                if(this.parameterlist!=null&&this.parameterlist.length>0){

                    for(let i=0;i<this.parameterlist.length;i++){
                        let pdata=JSON.parse(this.parameterlist[i].secinventory);

                        console.info(pdata)

                        for (let i=0;i<pdata.length;i++) {
                            let mdata=pdata[i]
                            for (let v in mdata){
                                sav.push(mdata[v].toString());
                            }
                        }
                        this.parameterlist.savparameterlist=pdata;
                    }
                    this.parameterlist.splist=sav;
                }
                this.formName = "detail";
            },

            /*点击页数*/
            handleCurrentChange(val) {
                this.query.currentPage = val;
                this.brandCommodityList();
            },

            /*选择每页条数【10,20,30,40,50】*/
            handleSizeChange(val) {
                this.query.pageSize = val;
                this.brandCommodityList();
            },
            openAlert(row) {
                this.$alert(row.brandRejectReason, '拒绝原因', {
                    confirmButtonText: '确定'
                });
            },
        },
        created() {
            this.brandCommodityList();
        }
    };
</script>
